<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.value"
          clearable
          placeholder="输入搜索内容"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.type"
          clearable
          placeholder="类型"
          class="filter-item"
          style="width: 130px"
        >
          <el-option
            v-for="item in queryTypeOptions"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="500px"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="电话号码" prop="phone">
            <el-input v-model="form.phone" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="设备名称" prop="device">
            <el-select
              v-model="form.device"
              style="width: 370px"
              placeholder="请选择设备"
              @change="getNames"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in devices"
                :key="item + index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="num" prop="num">
            <el-input-number v-model.number="form.num" :min="0" controls-position="right" style="width: 370px;" />
          </el-form-item>
             <el-form-item label="昵称" prop="nickname">
            <el-input v-model="form.nickname" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input-number v-model.number="form.age" :min="12" controls-position="right" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select
              v-model="form.sex"
              style="width: 370px"
              placeholder="请选择性别"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in sexs"
                :key="item + index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.cu === 2"
            type="primary"
            @click="crud.submitCU"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="columns.visible('id')" prop="id" label="id" />
        <el-table-column
          v-if="columns.visible('phone')"
          prop="phone"
          label="电话号码"
        />
        <el-table-column
          v-if="columns.visible('device')"
          prop="device"
          label="设备名称"
        />
        <el-table-column
          v-if="columns.visible('nickname')"
          prop="nickname"
          label="昵称"
        />
        <el-table-column
          v-if="columns.visible('age')"
          prop="age"
          label="年龄"
        />
        <el-table-column
          v-if="columns.visible('num')"
          prop="num"
          label="次数"
        />
        <el-table-column
          v-if="columns.visible('sex')"
          prop="sex"
          label="性别"
        />
    
        <el-table-column
          v-if="columns.visible('createTime')"
          prop="createTime"
          label="创建时间"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns.visible('updateTime')"
          prop="updateTime"
          label="更新时间"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns.visible('remark')"
          prop="remark"
          label="remark"
        />
        <el-table-column
          v-permission="['admin', 'shopMember:edit']"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudShopMember from "@/api/shopmember";
import CRUD, { crud, form, header, presenter } from "@crud/crud";
import { getDeviceNames } from "@/api/getDeviceNames";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import MaterialList from "@/components/material";

// crud交由presenter持有
const defaultCrud = CRUD({
  title: "本店会员",
  url: "api/shopMember",
  sort: "id,desc",
  crudMethod: { ...crudShopMember }
});
const defaultForm = {
  id: null,
  phone: null,
  device: null,
  nickname: null,
  sex: null,
  age: null,
  isDel: null,
  createTime: null,
  updateTime: null,
  remark: null
};
export default {
  name: "shopMember",
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    MaterialList
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      devices: [],
      sexs: ["女神","男神"],
      permission: {
        add: ["admin", "shopMember:add"],
        edit: ["admin", "shopMember:edit"]
      },
      rules: {
        phone: [
          {
            required: true,
            message: "用户电话号码不能为空",
            trigger: "blur"
          }
        ],
        device: [
          {
            required: true,
            message: "设备名称不能为空",
            trigger: "blur"
          }
        ],
        num: [
          {
            required: true,
            message: "数量不能为空",
            trigger: "blur"
          }
        ],
         nickname: [
          {
            required: true,
            message: "昵称不能为空",
            trigger: "blur"
          }
        ],
        sex: [
          {
            required: true,
            message: "性别不能为空",
            trigger: "blur"
          }
        ],
        age: [
          {
            required: true,
            message: "年龄不能为空",
            trigger: "blur"
          }
        ]
      },
      queryTypeOptions: [
        {
          key: "phone",
          display_name: "用户电话号码"
        },
        {
          key: "device",
          display_name: "设备名称"
        }
      ]
    };
  },
  mounted: function() {
    //在页面加载参数结束后执行某个函数
    this.$nextTick(function() {
      //调用需要执行的方法
      //this.getAgent()
      this.getNames();
    });
  },
   created() {
          //初始化按钮显示或者隐藏
          this.crud.optShow = { add: true, edit: true, del: false, download: false }
        },
  watch: {},
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      const query = this.query;
      if (query.type && query.value) {
        this.crud.params[query.type] = query.value;
      } else {
        delete this.crud.params.phone;
        delete this.crud.params.device;
      }
      return true;
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {},
    getNames() {
      getDeviceNames()
        .then(res => {
          this.devices = res;
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
</style>
